<template>
  <div>
    <el-button type="primary" @click="clickNew" size="mini">新增</el-button>
    <el-drawer :withHeader="false" :visible.sync="dialog" direction="rtl" :with-header="false" ref="drawer"
      size="480px">
      <div style="margin:20px">
        <el-form :model="ruleForm" label-position="right"
         status-icon :rules="rules" ref="ruleForm" label-width="80px" >
          <el-form-item label="用户名:" prop="userName">
            <el-input class="form-input" v-model.number="ruleForm.userName" autocomplete="off" auto-complete="new-password" :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="登录密码:" prop="pass">
            <el-input class="form-input" type="password" v-model="ruleForm.pass" autocomplete="off" auto-complete="new-password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码:" prop="checkPass">
            <el-input class="form-input" type="password" v-model="ruleForm.checkPass" autocomplete="off" auto-complete="new-password"></el-input>
          </el-form-item>
          <el-form-item label="用户权限:" prop="role">
            <el-select class="form-input" v-model="ruleForm.role" placeholder="请选择角色..." autocomplete="off" auto-complete="new-password">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="float:right;">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="dialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import '../../api/user'
  import { add, edit } from '../../api/user';
  export default {
    name: "PopVue",
    data() {
      var checkUserName = (rule, value, callback) => {        
        if (!value) {
          return callback(new Error('用户名不能为不能为空'));
        }
        if (typeof value === 'number') {
          return callback(new Error('用户名不能已数字开头'));
        }
        if (value.length<2) {
          return callback(new Error('用户名长度必须大于3'));
        }
        
        callback();
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validateRole = (rule, value, callback) => {
        if (value == null) {
          callback(new Error('请选择权限'));
        }
        callback();
      };
    
      return {
        dialog: false,
        disabled: true,
        ruleForm: {
          pass: '',
          checkPass: '',
          userName: '',
          role: '',
          userId: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          userName: [
            { validator: checkUserName, trigger: 'blur' }
          ],
          role: [
            { validator: validateRole, trigger: 'blur'}
          ]
        },
        options: [{
          value: 'manager',
          label: 'manager'
        }, {
          value: 'analyst',
          label: 'analyst'
        }, {
          value: 'developer',
          label: 'developer'
        }, {
          value: 'tester',
          label: 'tester'
        }],
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.disabled
            ?edit(this.ruleForm).then(response => {
              if (response.code===400) {
                return
              }
              this.$parent.$parent.handleClick()
              this.dialog = false
              }).catch(error => {
                console.log(error)
              })
            :add(this.ruleForm).then(response => {
              if (response.code===400) {
                return
              }
              this.$parent.$parent.handleClick()
              this.dialog = false
            }).catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        if (this.$refs[formName]!=null) {
          this.$refs[formName].resetFields();
        }
      },
      clickNew(row) {
        this.disabled = false
        this.dialog = true
        this.resetForm('ruleForm')
        if (row.userId!=null) {
          this.ruleForm.userName = row.userName
          this.ruleForm.pass = row.password
          this.ruleForm.checkPass = row.password
          this.ruleForm.role = row.role
          this.ruleForm.userId = row.userId
          this.disabled = true
        }
      }
    },
  }

</script>
<style>
.el-form-item__content{
  margin-left:0 !important;
}
.form-input{
      width: 350px;
}
</style>
